/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable jsx-a11y/anchor-has-content */
import React, { Component } from "react";
import { CSSTransition } from "react-transition-group";
import "./index.scss";
import { connect } from "react-redux";
import { Link } from "react-router-dom";

import {
  searchBlur,
  searchFocus,
  getList,
  mouseEnter,
  mouseLeave,
  changePage,
  changeFixed,
} from "./store/actions";
import {logout} from "../login/store/actionCreators"
class Header extends Component {
  //   handlefocus = () => {
  //     this.setState({
  //       focused: true,
  //     });
  //   };
  //   handleblurs = () => {
  //     this.setState({
  //       focused: false,
  //     });
  //   };
logoutout=()=>{
  console.log(this.props);
  this.props.history.push("/login")
  this.props.logout()
}
  renderInfo = () => {
    const {
      focused,
      list,
      page,
      totalPage,
      handleMouseEnter,
      handleMouseLeave,
      mousein,
      handleChangePage,
    } = this.props;
    console.log(list);
    const newList = list.toJS();
    const pageList = [];
    if (newList.length) {
      for (let i = (page - 1) * 10; i < page * 10; i++) {
        pageList.push(<a key={newList[i]}>{newList[i]}</a>);
      }
    }

     if (focused || mousein)
      return (
        <div
          className="SearchInfo"
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          <div className="sanjiao"></div>
          <div className="search-title">
            热门搜索
            <div
              className="SearchInfoSwitch"
              onClick={() => handleChangePage(page, totalPage)}
            >
              <i className="iconfont icon-weibiaoti--"></i>
          换一批
            </div>
          </div>
          <div className="searchList">{pageList}</div>
        </div>
      );
  };

  render() {const { focused, handlefocus, handleblurs, list, login, isTabFixed } = this.props;
    if (this.props.location.pathname.includes("/login")) {
      return "";
    }
    return (
      <div className={isTabFixed ? "header isFixed" : "header"}>
        <div className="container">
       
          <Link to='/'>
				    <h1 className="header-logo" title="简书">
           
          </h1>
				</Link>
          <ul className="nav">
            <li className="tab active">
              <Link to="/" className="active">
                <i className="iconfont icon-zhinanzhen_o menu-icon"></i>
                <span className="menu-text ">首页</span>
              </Link>
            </li>
            <li className="tab ">
              <a
                className="app-download-btn"
                href="/apps?utm_medium=desktop&amp;utm_source=navbar-apps"
              >
                <i className="iconfont icon-xiazai-wenjianxiazai-03 menu-icon"></i>
                <span className="menu-text">下载App</span>
              </a>
            </li>
            <li className="tab ">
              <a href="/vips">
                <i className="iconfont icon-huangguan menu-icon"></i>
                <span className="menu-text">会员</span>
              </a>
            </li>
            <li className="tab ">
              <a href="/techareas">
                <i className="iconfont icon-Gitlab menu-icon"></i>
                <span className="menu-text">IT技术</span>
              </a>
            </li>

            <li className="search ">
              <form target="_blank" method="get">
                <CSSTransition
                  in={focused}
                  timeout={200}
                  classNames="slide"
                >
                  <input
                    type="text"
                    placeholder="搜索"
                    onFocus={()=>{handlefocus(list)}}
                    onBlur={handleblurs}
                    className={
                      this.props.focused
                        ? "search-input focused"
                        : "search-input"
                    }
                  />
                </CSSTransition>
                <i
                  className={
                    focused
                      ? "iconfont icon-sousuo focused"
                      : "iconfont icon-sousuo"
                  }
                ></i>
                {this.renderInfo()}
              </form>
            </li>
          </ul>

          <div className="right">
            <a className="style-mode-btn">
              <i className="iconfont icon-case"></i>
            </a>
            {login ? (
              <a className="btn log-in" onClick={this.logoutout}  >
                退出
              </a>
            ) : (
              <Link to="/login" className="btn log-in">
                登录
              </Link>
            )}

            <a className="btn sign-up">注册 </a>
            <Link className="btn write-btn" to="/write">
              <i className="iconfont icon-yongyan"></i>
              写文章
            </Link>
          </div>
        </div>
      </div>
    );
  }

  componentDidMount() {
    window.addEventListener("scroll", this.props.ToggleFixed);
  }
}

const mapStatetoProps = (state) => {
  return {
    focused: state.getIn(["header", "focused"]),
    list: state.getIn(["header", "list"]),
    page: state.getIn(["header", "page"]),
    mousein: state.getIn(["header", "mousein"]),
    totalPage: state.getIn(["header", "totalPage"]),
    isTabFixed: state.getIn(["header", "isTabFixed"]),
    login: state.getIn(["login", "loginstatus"]),
  };
};
const mapDispatchtoProps = (dispatch) => {
  return {
    handlefocus: (list) => {
      console.log(list.size);
     
      dispatch(searchFocus());
       list.size==0&&dispatch(getList());
    },
    handleblurs: () => {
      dispatch(searchBlur());
    },
    handleMouseEnter: () => {
      dispatch(mouseEnter());
    },
    handleMouseLeave: () => {
      dispatch(mouseLeave());
    },
    handleChangePage(page, totalPage) {
      if (page < totalPage) {
        dispatch(changePage(page + 1));
      } else {
        dispatch(changePage(1));
      }
    },
    ToggleFixed() {
      if (document.documentElement.scrollTop > 50) {
        dispatch(changeFixed(true));
      } else {
        dispatch(changeFixed(false));
      }
    },
    logout(){
      console.log(this.props);
  
      dispatch(logout())
    }
  };
};
export default connect(mapStatetoProps, mapDispatchtoProps)(Header);
